import React, { Component } from 'react'
import { Form, Input, Button, Select, message } from 'antd';
import { getOneAdmin,updateOneAdminApi } from '../../apis/adminsApi'

const { Option } = Select
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};
export default class AddAccount extends Component {
    state = {
        loading: false,
        mess: {}
    }
    componentDidMount() {
        console.log(this.props.location);
        this.getId()
    }
    getId = async () => {
        const _id = this.props.location.search.split("?")[1].split("=")[1];
        const data = await getOneAdmin({ _id });
        this.setState({ mess: data[0] })
        this.myForm.setFieldsValue({ username:data[0].username, password: data[0].password, role: data[0].role })
    }
    onFinish = async(values) => {
        const _id = this.state.mess._id
        console.log('Success:', values);
        try {
            this.setState({loading:true})
            const data = await updateOneAdminApi({_id,values})
            // console.log(data);
            this.setState({loading:false})
            message.success('修改成功');
            this.props.history.push(`/main/AdminsList`)
        } catch (error) {
            this.setState({loading:false})
            message.error('修改失败');
        }

    };
    onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    render() {
        const { loading, mess } = this.state;
        return (
            <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}>
                <Form
                    {...layout}
                    name="basic"
                    style={{ width: 400 }}
                    // initialValues={{ username: mess.username, password: mess.password, role: mess.role }}
                    ref={node => this.myForm = node}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                >
                    <Form.Item
                        label="账户名"
                        name="username"
                        rules={[{ required: true, message: '请输入你的用户名' }]}
                    >
                        <Input placeholder="请输入你的用户名" />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入你的密码' }]}
                    >
                        <Input placeholder="请输入你的密码" />
                    </Form.Item>

                    <Form.Item label="角色" name="role"
                        rules={[{ required: true, message: '请输入选择角色!' }]}>
                        <Select style={{ width: 120 }} placeholder="请选择角色">
                            <Option value="1">超级管理员</Option>
                            <Option value="0">普通管理员</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit" loading={loading}>
                            修改
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}